<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j goods-module-one-component">
    <div class="one-items">
      <goods-module-one :config="config.leftConfigMessage" />
    </div>
    <div class="one-items">
      <goods-module-one :config="config.centerConfigMessage" />
    </div>
    <div class="one-items">
      <goods-module-one :config="config.rightConfigMessage" />
    </div>
  </div>
</template>
<script setup>
import goodsModuleOne from '../goods-component/goods-module-one/index.vue'

const props = defineProps({
  itemComponent: { // 组件信息展示
    type: Object,
    default: () => {}
  }
})

// 配置信息
const config = reactive({
  leftConfigMessage: {
    mainTitle: '主标题',
    subTitle: '副标题'
  }, // 左边配置信息
  centerConfigMessage: {
    mainTitle: '主标题',
    subTitle: '副标题'
  }, // 中间配置信息
  rightConfigMessage: {
    mainTitle: '主标题',
    subTitle: '副标题'
  } // 右边配置信息
})

// 监听组件的信息
watch(() => props.itemComponent, (newVal) => {
  if (JSON.stringify(newVal.rightConfigMessage) !== '{}') {
    config.leftConfigMessage = { ...newVal.rightConfigMessage.leftConfig }
    config.centerConfigMessage = { ...newVal.rightConfigMessage.centerConfig }
    config.rightConfigMessage = { ...newVal.rightConfigMessage.rightConfig }
  }
}, {
  immediate: true,
  deep: true
})

</script>

<style lang="scss" scoped>
.goods-module-one-component {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .one-items {
    width: calc((100% - 40px) / 3);
  }
}

</style>
